<!--定时器管理-->
<template>
  <div>
    <div style="margin-bottom: 20px;font-weight: bold;">上传批号：{{ $route.query.batchname }}</div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formData" class="user-search">
      <el-form-item label="料号" style="width: 100%;" class="textarea">
        <el-input clearable size="small" type="textarea" v-model="formData.lh" placeholder="输入料号，多个用英文逗号隔开" style="width: 100%;"></el-input>
      </el-form-item>
      <el-form-item label="客户">
        <el-input clearable size="small" v-model="formData.kh" placeholder="输入客户"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getdata()">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-document" @click="handleExport()">导出</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table id="out-table" size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
      <el-table-column align="center" sortable prop="kh" label="客户" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="lh" label="料号" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="ywpm" label="英文品名" width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="zwpm" label="中文品名" width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="kw" label="库位" width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="tmh" label="条码号" width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="swkcsl" label="实物库存数量" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="cd" label="产地" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="sf3c" label="是否3c" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="sfsnx" label="是否涉能效" width="110" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="jgtj" label="监管条件" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="wlzt" label="物料状态" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="sdyy" label="锁定原因" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="xlh" label="序列号" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="dj" label="单价" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="bz" label="币制" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="ywckh" label="业务参考号" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="jz" label="净重" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="jksj" label="进库时间" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="dzzcxh" label="电子帐册序号" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="spbm" label="商品编码（HS）" width="140" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="sbys" label="申报要素" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="cjdw" label="成交单位" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="desc" label="备注" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="zhgsl" label="最惠国税率" width="110" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="zzsl" label="增值税率" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" sortable prop="dmsl" label="对美税率" width="100" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import * as XLSX from 'xlsx'
  import { getDataList } from '@/api/userMG';
  export default {
    data() {
      return {
        loading: false, //表格是否显示加载
        formData: {
          batchid: this.$route.query.batchid,
          kh: '',
          lh: ''
        },
        listData: [],
      }
    },
    async created() {
      await this.getdata()
    },
    methods: {
      // 获取列表
      async getdata() {
        this.loading = true
        await getDataList(this.formData)
          .then(res => {
            this.loading = false
            if (res.data.success == false) {
              this.$message({
                type: 'info',
                message: res.data.msg
              })
            } else {
              this.listData = res.data.datas;
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error(err)
          })
      },
      // 导出excel
      handleExport(){
        let excelName = '导出表格名称.xlsx';
        var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
        // 克隆节点
        let tables = document.getElementById("out-table").cloneNode(true);
        // 判断是否为固定列，解决（为固定列时，会重复生成表格）
        if (tables.querySelector('.el-table__fixed') !== null) {
          tables.removeChild(tables.querySelector('.el-table__fixed'))
        }
        //在这之前可以修改tables添加东西
        let table_book = XLSX.utils.table_to_book(tables,xlsxParam);
        var table_write = XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        //在这可以操作table_write设置导出表格样式
        try {
          FileSaver.saveAs(
                new Blob([table_write], { type: "application/octet-stream" }),
                excelName
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
        }
        return table_write;
      }
    }
  }
</script>

<style scoped>
  .textarea /deep/.el-form-item__content{
    width: calc(100% - 40px);
  }
</style>


